<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>解构赋值</title>
  </head>
  <body>
    <script>
      /**数组的解构赋值
       *
       * 事实上，只要某种数据结构具有 Iterator 接口，都可以采用数组形式的解构赋值。
       */

      //   let [a, b, c] = [1, 2, 3];
      //   let [q, , e] = [5, 6, 7];
      //   let [[a, b], c] = [[2, 3], 9];
      //   let [x,y,z]=new Set([1,2,3]);

      //   /**默认值*/

      //   let[a,b,c=12]=[1,2];

      /**对象的解构赋值*/

      // const user = {
      //     name: 'Alice',
      //     age:12,
      //     gender: '男',
      //     nums:[1,2,3,4,5],
      //     child:{
      //         childName:'Alice',
      //         childAge: 19
      //     },

      //     self:null

      // }
      /**对象的解构赋值是找同名属性，找不到就是undefined*/
      // let{name,age,gender} =user;

      /**如果变量名和属性值不同要写成 对象属性名：变量名*/
      // let{name:username,age:userAge,gender:userGender}=user;

      /**访问嵌套对象要注意加上:*/
      // let{name,nums:[a,b,c,d,e,f=100],child:{childName,childAge}} = user;
      // console.log(name,a,b,c,d,e,f,childName,childAge);

      /**对象的解构赋值也可以有默认值*/
      // let {a=15} ={}; //a=15
      // let {a:b=15} ={a:10} //b=10
      // let {a:b=15} ={} //b=15

      // /**默认值生效的条件是，对象的属性值严格等于undefined*/
      // let {a=15} ={a:undefined}; //a=15
      // let {a=15} ={a:null}; //a=null

      /**函数参数的解构赋值*/

      //这里没有用到解构赋值，只是函数的默认值参数
      // function foo(x=0,y=0){
      //     console.log(x,y);
      // }
      // foo(1,2);
      // foo();

      //函数被调用的时候如果参数传入的对象没有这两个属性的话(没有这两个属性可能是传入的是空对象，或者没有传参数)
      //函数内的参数就使用该默认值
      //  function foo({a=12,b=13}){
      //      console.log(a,b);
      //  }

      /**这种写法在调用函数的时候如果没有传入对象会报错,而不会使用默认值
       * 因为解构赋值只有当原值是Undefined类型才会使用默认值,而这里原值是is not defined
       */
      function foo1({ a = 12, b = 13 }) {
        console.log(a, b);
      }

      /**这种写法可以预防函数在调用的时候不传没有传对象类型的参数报错
       * 如果调用的函数没有传参数就会使用空对象
       */
      function foo2({ a = 12, b = 13 } = {}) {
        console.log(a, b);
      }

      /**注意将这种写法与上面的写法区分,这个是为对象的参数赋默认值
       * 即函数调用的时候如果空参就会使用后面的值
      */
      function foo3({ a, b } = { a: 100, b: 200 }) {
        console.log(a, b);
      }

      foo1({ a: 100, b: 200 });
      foo1({ a: 100 });
      foo1({});
      //   foo1();报错

      console.log("=======================");
      foo2({ a: 100, b: 200 });
      foo2({ a: 100 });
      foo2({});
      foo2();

      console.log("=======================");
      foo3({ a: 100, b: 200 });
      foo3({ a: 100 });
      foo3({});
      foo3();
    </script>
  </body>
</html>
